<template>
	<div class="disc_place">

		<div class="bg_img">
			<img :src="song_info.picUrl" alt="">
			<div class="mask"></div>
		</div>
		<div class="disc_area">
			<h3 class="logo_place">Ghostease</h3>
			<div @click="$emit('close')" class="down_arrow"><i class="iconfont icon-jiantou9"></i></div>
			<div :class="!play_state? 'disc animate_pause':'disc'">
				<img src="../../../assets/playdetail/disc.png" alt="">
				<div class="song_img">
					<img :src="$store.state.song_info.picUrl" alt="">
				</div>
			</div>
		</div>
		<div class="info">
			<div class="song_name_singer">
				{{song_info.song_name}}-{{song_info.ars | formatSinger_global}}
			</div>

			<div ref='lyric' class="lyric">
				<div ref='lyricbox' class="lyric_content default_Y" :style="{transform: `translateY(${(this.active_lyric_index - 2) * (-20)}px)`}">
					<lyric @click_lyric="get_inedx" v-for="(item , index) in lyric_info.lyric_divided" :key='index' :lyric_obj="{
					item,
				}"
					:index='index' :class="active_lyric_index == index?'lyric_active':''"></lyric>
				</div>
			</div>

		</div>
		<div class="process">

			<div class="nowmoment">{{song_duration_info.current_time | formatduration_global}}</div>
			<div class="processbox">
				<van-slider v-model="value" @change="onChange" @drag-start="drag_start" @drag-end="drag_end" min='0' :max='song_duration_info.duration' />
			</div>
			<div class="totaltime">{{song_duration_info.duration | formatduration_global}}</div>
		</div>

		<div class="play_control">
			<div class="logo_box">
				<i @click="prev_song" class="iconfont icon-shangyishou"></i>
				<i @click="play" class="iconfont icon-bofang_huaban" v-if="!$store.state.play_state"></i>
				<i @click="stop" class="iconfont icon-zanting" v-else></i>
				<i @click="next_song" class="iconfont icon-xiayishou"></i>
			</div>

		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import lyric from '../../../components/lyric/lyric.vue';
	export default {
		computed: {
			...mapState(['play_state', 'song_info', 'play_list', 'song_idx', 'song_duration_info', 'active_lyric_index',
				'lyric_info'
			]),
			follow_curr() {
				return this.song_duration_info.current_time;
			},
			// offset_idx(){
			// 	if( this.lyric_info.active_lyric_index >= 0)
			// 	{
			// 		return 0;
			// 	}else{
			// 		return this.lyric_info.active_lyric_index;
			// 	}
			// 	},

			// 	return
			// }
			// switch_vmodel(){
			// 	if (this.onswitch){
			// 		return this.value = this.song_duration_info.current_time;
			// 	} else {
			// 		return this.value;
			// 	}
			// }
		},
		watch: {
			follow_curr() {
				if (this.onswitch) {
					//拖动结束时
					this.value = this.song_duration_info.current_time;
				} else {
					//拖动开始时
				}
			},
			// offset: {
			// handler(newVal, oldVal) {
			// console.log(newVal,oldVal)
			// let act_num = this.active_lyric_index;
			// if (newVal > oldVal) {
			// 	//鼠标下滑
			// 	act_num = this.offset - Math.abs(newVal);

			// 	if (act_num <= 0) {
			// 		act_num = 1;
			// 	}
			// 	this.$store.commit('lyric_to_idx', act_num);
			// } else {
			// 	act_num = this.offset + Math.abs(newVal);
			// 	if (act_num > this.lyric_info.lyric_divided - 2) {
			// 		act_num = this.lyric_info.lyric_divided - 2;
			// 	}
			// 	this.$store.commit('lyric_to_idx', act_num);
			// }
			// }
			// }
		},
		data() {
			return {
				value: 0,
				duration: 1,
				onswitch: true,
				vuex_currtime: 0,
				startY: 0,
				moveY: 0,
				endY: 0,
				offset: 0,
				click_idx: 0,
			};
		},
		components: {
			lyric,
		},
		mounted() {
			this.$refs.lyric.addEventListener("touchstart", (e) => {
				clearTimeout(this.timer);
				this.startY = e.targetTouches[0].clientY;
				this.$store.commit('change_update_switch', false);


			})

			this.$refs.lyric.addEventListener("touchmove", (e) => {
				// console.log(e,'clientY');
				this.moveY = e.targetTouches[0].clientY;
				if (this.offset == parseInt((this.moveY - this.startY) / 40)) {
					this.$store.commit('lyric_to_idx', this.active_lyric_index);
				} else {
					this.offset = parseInt((this.moveY - this.startY) / 40);
					let act_num = this.active_lyric_index;

					if (this.offset < 0) {
						// 	//鼠标向上, 歌词向下
						// console.log(act_num + Math.abs(this.offset));
						if (act_num + Math.abs(this.offset) > (this.lyric_info.lyric_divided.length - 2)) {
							this.$store.commit('lyric_to_idx', this.lyric_info.lyric_divided.length - 2);
						} else {
							this.$store.commit('lyric_to_idx', act_num + Math.abs(this.offset));
						}

						// this.$store.commit('lyric_to_idx', act_num - parseInt(this.offset / 20) );
						// 	// console.log(this.active_lyric_index,'11')
					} else {
						// 	//鼠标向下, 歌词向上

						if (act_num - Math.abs(this.offset) <= 0) {
							this.$store.commit('lyric_to_idx', 0)
						} else {
							this.$store.commit('lyric_to_idx', act_num - Math.abs(this.offset));
						}

						// console.log(this.active_lyric_index,1111111);
						// this.$store.commit('lyric_to_idx', act_num + parseInt(this.offset / 20));
						// 	// console.log(this.active_lyric_index,'22')
					}
				}

			})

			this.$refs.lyric.addEventListener("touchend", () => {

				this.timer = setTimeout(() => {
					// 歌词允许跟着音频动
					this.$store.commit('change_update_switch', true);

				}, 1000);




			})


		},
		methods: {
			onChange(value) {
				// this.value = this.song_duration_info.current_time;
				// this.duration = this.song_duration_info.duration;
				this.audio.currentTime = value;
				// this.$store.commit('set_song_duration_info',{
				// 	duration: this.song_duration_info.duration,
				// 	current_time: value,
				// });
			},
			prev_song() {
				this.$root.$children[0].prev_song();
			},
			next_song() {
				this.$root.$children[0].next_song();
			},
			play() {
				this.audio.play();
			},
			stop() {
				this.audio.pause();
			},
			drag_start() {
				this.onswitch = false;
			},
			drag_end() {
				this.onswitch = true;
			},
			get_inedx(index) {
				// console.log(this.lyric_info.lyric_schedule[index],this.audio.currentTime)
				this.$store.commit('lyric_to_idx', index);
				this.audio.currentTime = this.lyric_info.lyric_schedule[index] / 1000;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.disc_place {

		// position: relative;
		.bg_img {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -2;
			background-color: white;
			background-position: center;
			background-size: cover;
			// opacity: 0.5;
			filter: blur(10px);
			width: 100%;
			height: 100vh;
			overflow: hidden;
			transform: scale(1.2);

			img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: -2;
			}

			.mask {
				width: 100%;
				height: 100vh;
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: -1;
				transform: translate(-50%, -50%);
				background-color: rgba($color: #000000, $alpha: 0.5);
			}
		}

		.disc_area {
			// background-color: hotpink;
			width: 100vw;
			height: 368px;
			position: relative;

			.logo_place {
				width: 100%;
			}

			.down_arrow {
				color: white;
				position: absolute;
				top: 2%;
				right: 3%;

				.icon-jiantou9 {
					font-size: 24px;
				}
			}

			display: flex;
			flex-wrap: wrap;

			justify-content: center;

			.animate_pause {
				animation-play-state: paused;
			}

			.disc {
				@keyframes disc_rotate {
					from {

						transform: rotate(0deg);
					}

					to {

						transform: rotate(360deg);
					}
				}

				transform-origin: center;
				animation-name: disc_rotate;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				animation-duration: 8s;
				position: absolute;
				width: 296px;
				height: 296px;
				top: 30px;
				left: calc(50% - 148px);

				img {
					width: 100%;
				}

				.song_img {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 200px;
					height: 200px;
					border-radius: 50%;
					overflow: hidden;

					img {
						width: 100%;
					}
				}
			}

		}

		.info {
			.song_name_singer {
				color: white;
			}

			.lyric {
				height: 100px;

				// background-color: red;
				overflow: hidden;
				overflow-x: hidden;
				// overflow: auto;
				line-height: 20px;

				.lyric_content {}

				.default_Y {
					transition: all .5s;
					font-size: 16px;
				}
			}

			.song_name_singer {
				padding-bottom: 10px;
			}
		}

		.process {
			padding-top: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			bottom: 14%;
			width: 100%;

			.nowmoment {
				color: white;
			}

			.totaltime {
				color: white;
			}

			.processbox {
				display: flex;
				width: 68%;
				align-items: center;
			}
		}

		.play_control {
			width: 100%;
			display: flex;
			justify-content: center;
			position: absolute;
			bottom: 3%;

			.logo_box {
				width: 50%;
				display: flex;
				justify-content: space-between;

				.iconfont {
					color: white;
					font-size: 50px;
				}

			}
		}

	}



	.lyric_active {
		color: white;
		transform: scale(1.2);
	}
</style>
